import { defineComponent, ref, computed, watch } from 'vue'
import VeDropdown from 'amtf/components/dropdown'
import { inject } from 'vue'
import {是浏览器环境否} from 'amtf/utils';

import { COMPS_NAME, EMIT_EVENTS } from './util/constant'
import VeIcon from 'amtf/components/icon'

import { ICON_NAMES } from 'amtf/constants'

import { useEmitter } from 'amtf/hooks'
import emitter from 'amtf/utils/emitter'
import { use样式 } from 'amtf/hooks'
import {
  autoResize,
  setCaretPosition,
  getCaretPosition,
  isEmptyValue,
  getValByUnit,
  拼组件名,
  isFunction,
  isBoolean,
  getRandomId,
} from 'amtf/utils'
const 主名 = 'select'
const 组件名 = 拼组件名(主名)

export default defineComponent({
  name: 组件名,
  components: { VeDropdown, VeIcon },
  props: {
    width: {
      type: Number,
      default: 90,
    },
    // select的最大宽度(超出隐藏)
    maxWidth: {
      type: Number,
      default: 0,
    },
    // 如果为true 会包含 checkbox
    isMultiple: {
      type: Boolean,
      default: false,
    },
    // 用户传入v-model 的值 [{value/label/selected}]
    value: {
      type: Array,
      default: null,
    },
    // 占位符
    placeholder: {
      type: String,
      default: '请选择',
      validator: (value) => value.length > 0,
    },
    // 文本居中方式 left|center|right
    textAlign: {
      type: String,
      default: 'left',
    },
    // 是否支持输入input
    isInput: {
      type: Boolean,
      default: false,
    },
    // popper append to element
    popperAppendTo: {
     type: [String, 是浏览器环境否 ? HTMLElement : Object],
      default: () => document.body,
    },
  },
  setup(props, { emit }) {
const { dispatch } = useEmitter(inject('表格id'))
    const { 拼样式名_提前传主名 } = use样式(主名)

    const visible = ref(false)
    const internalOptions = ref([])
    const inputValue = ref('')
    const dropdownVisible = ref(false)

    const iconClass = computed(() => ({
      [拼样式名_提前传主名('show')]: dropdownVisible.value,
      [拼样式名_提前传主名('toggle-icon')]: true,
    }))

    watch(
      () => props.value,
      () => {
        init()
      }
    )

    const init = () => {
      internalOptions.value = [...props.value]
    }

    const showSelectInfo = () => {
      let result, labels
      labels = selectedLabels()
      if (Array.isArray(labels) && labels.length > 0) {
        result = labels.join()
      } else {
        result = props.placeholder
      }
      return result
    }

    const selectedLabels = () => {
      return internalOptions.value
        .filter((x) => x.selected)
        .map((x) => {
          if (x.selected) {
            return x.label
          }
        })
    }

    const dropdownChange = () => {
      // 使用户传入的v-model 生效
      emit('input', internalOptions.value)
      emit(EMIT_EVENTS.SELECT_CHANGE, internalOptions.value)
    }

    init()

    return () => {
      const { isInput } = props

      const propsForDropdown = {
        class: 've-select',
        isSelect: true,
        width: props.width,
        maxWidth: props.maxWidth,
        isMultiple: props.isMultiple,
        textAlign: props.textAlign,
        isInput: props.isInput,
        // v-model
        value: internalOptions.value,
        hideByItemClick: true,
        popperAppendTo: props.popperAppendTo,
      }

      const onForDropdown = {
        // change: dropdownChange,
        // v-model
        input: (val) => {
          internalOptions.value = val
          dropdownChange()
        },
        // dropdown visible change
        'dropdown-visible-change': (visible) => {
          dropdownVisible.value = visible
        },
      }

      let content
      if (isInput) {
        content = (
          <input
            class={拼样式名_提前传主名('input')}
            placeholder={props.placeholder}
            type="text"
            value={inputValue.value}
            onChange={(e) => {
              inputValue.value = e.target.value
            }}
          />
        )
      } else {
        content = (
          <span class={拼样式名_提前传主名('selected-span')}>
            {showSelectInfo()}
          </span>
        )
      }

      return (
        <VeDropdown {...propsForDropdown} {...onForDropdown}>
          <span>
            {content}
            <VeIcon name={ICON_NAMES.BOTTOM_ARROW} class={iconClass.value} />
          </span>
        </VeDropdown>
      )
    }
  },
})
